<template>
  <div>
    <!-- 卡片 -->
    <el-card>
      <!-- 新增按钮 -->
      <el-row type="flex" justify="end">
      <el-button type="success" icon="el-icon-edit" @click="addperm" >新建菜单</el-button>
      </el-row>
      <el-table
        :data="renderList"
        class="my_table"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        default-expand-all
        :tree-props="{children:'childs' }">
        <el-table-column
          prop="title"
          label="标题"
          width="200"
          >
          <template slot-scope="{row}">
            <i class="el-icon-folder-opened" v-if="row.childs"></i>
            <i class="el-icon-view"  v-else-if="row.is_point"></i>
            <i class="el-icon-document" v-else></i>
              {{row.title}}
          </template>
        </el-table-column>
        <el-table-column
          prop="code"
          label="权限点代码"
          width="1340">
        </el-table-column>
        <el-table-column
          label="操作"
          width="140">
          <template slot-scope="{row}">
            <el-button type="primary" icon="el-icon-edit" circle plain @click="edit(row)"></el-button>
            <el-button type="danger" icon="el-icon-delete" circle plain @click="del(row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 新增弹框 -->
    <MenuAdd ref="menuadd" @handleCloseModal='handleCloseModal'></MenuAdd>
  </div>
</template>

<script>
import { list, remove } from '@/api/base/menus.js'
import MenuAdd from '../components/menu-add.vue'
export default {
  data () {
    return {
      // 列表渲染
      renderList: []
    }
  },
  updated () {
    const cleardom = document.querySelectorAll('.el-table__expand-icon')
    Array.from(cleardom).forEach((item) => {
      item.remove()
    })
  },
  components: { MenuAdd },
  created () {
    this.search()
  },
  methods: {
    addperm () {
      this.$refs.menuadd.dialogFormV()
    },
    //
    async search () {
      const { data } = await list()
      this.renderList = this.setKeyChild(data)
    },
    async handleCloseModal () {
      this.$refs.menuadd.handleResetForm()
      this.$refs.menuadd.dialogFormH()
      this.search()
    },
    // 编辑
    edit (row) {
      this.$refs.menuadd.hanldeEditForm(row.id)
      this.$refs.menuadd.dialogFormV()
    },
    // 删除
    del (row) {
      console.log(row)
      // 警示
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 确定-删除
        await remove({ id: row.id })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.search()
      }).catch(() => {
        // 取消-失败
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    //
    setKeyChild (data) {
      const newData = new data.constructor()
      for (const k in data) {
        if (data[k] instanceof Object) {
          if (k === 'points') {
            newData.childs = this.setKeyChild(data[k])
          } else {
            newData[k] = this.setKeyChild(data[k])
          }
        } else {
          newData[k] = data[k]
        }
      }
      return newData
    }
  }
}
</script>

<style scoped lang='less'>

</style>
